<template>
  <div class="dayComp">
    <el-collapse class="my-collapse" v-model="pointName" @change="dayCollapseChange">
      <!-- day -->
      <el-collapse-item title="景点内容" name="scenicContent">
        <div class="everyDayBox">
          <el-form label-width="100px" class="demo-dynamic">
            <!-- 游玩点 -->
            <!-- {{dayItem.point}}   :obj-data='objData'   :scenic-data="point"            :ref="`pointComp${pointIndex}`"-->
            <el-form-item>
              <data-content
                :scenic-data="point"
                :day-comp-cropper-option="dayCompCropperOption"
                :point-in-resource-data="pointInResourceData"
                :main-option="mainOption"
                :name="name"
                @change-data="changeData"
              ></data-content>
            </el-form-item>
          </el-form>
          <!-- 图文和资源选择 -->
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>
<script>
// const imgText = require("./img-text.vue");
module.exports = {
  data() {
    return {
      appendToBody: false,
      // 点的折叠面板
      pointName: [],
      // day的折叠面板
      activeName: [],
      objData: {
        pointTitle: "",
        playTime: 1.0,
        content: [],
        correlationResource: [],
        option: { max: 20 },
        rules: [{ required: true, message: "请输入标题", trigger: "blur" }]
      }
    };
  },
  props: {
    name: {
      type: String,
      defalut: ""
    },
    mainOption: {
      type: Object,
      defalut: () => {
        return {};
      }
    },
    pointInResourceData: {
      type: Array,
      defalut: () => {
        return [];
      }
    },
    dayCompCropperOption: {
      type: Object,
      defalut: () => {
        return {};
      }
    },
    dayIndex: {
      type: Number,
      defalut: 0
    },
    point: {
      defalut: [],
      type: Array
    }
  },
  watch: {
    point: {
      handler(nowDay, oldDay) {
        console.log("point scenic");
        this.pointName.push(`pointItem${nowDay.length - 1}`);
      }
    }
  },
  components: {
    "data-content": httpVueLoader("./content.vue"),
    "resource-comp": httpVueLoader("./resourceComp.vue")
  },
  methods: {
    changeData(changeData) {
      this.$emit("change-data", changeData);
    },
    runDayForm() {
      let arr = [];
      let that = this;
      this.point.map((pointItem, pointIndex) => {
        arr = arr.concat(
          this.$refs[`pointComp${pointIndex}`][0].runContentComp()
        );
      });
      // 检查day
      Promise.all(arr)
        .then(function() {
          //都通过了
          console.log("yyes");
        })
        .catch(err => {
          this.point.map((pointItem, pointIndex) => {
            const checkResultPoint = this.pointName.some(
              (value, index, array) => {
                return value === "pointItem" + pointIndex;
              }
            );
            this.pointName = checkResultPoint
              ? this.pointName
              : this.pointName.concat(["pointItem" + pointIndex]);
          });
          // this.$message({ message: "请填写完整信息", type: "warning" });
          console.log("err", this.activeName);
        });
      return arr;
    },
    transmitImgTextData() {},
    transmitChangeArr(arr, dayIndex, pointIndex) {
      console.log(arr, pointIndex, "arr, pointIndex");
      this.day[dayIndex].point[pointIndex].resources = arr;
      // console.log(this.day[dayIndex].point[pointIndex], 'this.day.point')
    },
    pointIMgClick() {},
    stepConDel() {},
    pointTextClick(val, dayIndex, pointIndex, stepConIndex) {
      // this.day[dayIndex].point[pointIndex].content[stepConIndex].val = val
    },
    replaceN(str) {
      if (str) {
        return str.replace(/\n/g, "<br>");
      }
    },
    dayCollapseChange(activeName) {
      this.$emit("transmit-day-collapse-change", activeName);
    }
  }
};
</script>
<style scoped>
.dayComp {
  width: 90%;
}
.my-collapse .el-collapse-item__header {
  margin-left: 30px;
}
.dayinPoint {
  /* border: 1px solid seagreen; */
}
</style>